<template>
  <div class="box">
   <!-- 左侧 -->
    <div class="left">
      <!-- 左上 -->
      <div class="left-top">
        <Titles title="监控情况"></Titles>
        <monitor></monitor>



      </div>

      <!-- 左中 -->
      <div class="left-center">
        <Titles title="门禁情况"></Titles>
          <div class="men"> 
            <Accesscontrol></Accesscontrol>

            <div class="openrt">
              <div class="optop">
                <p>男生</p>
                 <p>女生</p>
              </div>
                <div class="opbom">

                  <div v-for="item in lists" :key="key"> 
                    <p>{{ item.num }}</p>
                    <p>{{ item.floor }}</p>
                  </div>


                </div>
            </div>
          </div>

      </div>

      <!-- 左下 -->
    <div class="left-bottom">
      <Titles title="值班情况"></Titles>
          <onduty class="duty"></onduty>
       
    </div>
    </div>

       <div class="center">
       <div class="cenimg">
        <img src="../assets/images/3Dmo.png" alt="">
       </div>
 <footernav class="footernav"></footernav>
      
       </div>

        <div class="right">
          <!-- 右上 -->
          <div class="right-top">
                   <div class="heads">
              <div class="rotateTitle">监控画面</div>
            </div>
          
        <div demo-bg>
    <dv-border-box12>
      <div dv-bg>


            <div class="rt-top">

            <video controls style="width:100%;height: 90%;margin-top: 2%;">
            <source src="https://cdn.uviewui.com/uview/resources/video.mp4" type="video/mp4">
            </video>

            </div>
       </div>
    </dv-border-box12>
  </div>


       <div demo-bg>
    <dv-border-box12>
      <div dv-bg>
            <div class="rt-center">
               <video controls style="width: 100%;height: 90%;margin-top: 2%;">
              <source src="https://cdn.uviewui.com/uview/resources/video.mp4" type="video/mp4">
              </video>  
            </div>
     </div>
    </dv-border-box12>
  </div>


                <div demo-bg>
    <dv-border-box12>
      <div dv-bg>


            <div class="rt-bom"> 
                <video controls style="width: 100%;height: 90%;margin-top:2%;">
                <source src="https://cdn.uviewui.com/uview/resources/video.mp4" type="video/mp4">
                </video>
            </div>
          </div>
    </dv-border-box12>
  </div>
          </div>

   
    
        <div class="top"></div>
  </div>
  </div>
</template>

<script setup lang="ts">
import footernav from '../components/footernav.vue'
import Titles from '../components/Title.vue' 
import { BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3'
import monitor from '../components/secures/monitor.vue'
import onduty from '../components/secures/onduty.vue'
import Accesscontrol from '../components/secures/Accesscontrol.vue'

import {ref,onMounted} from 'vue'
import {getAccesscontrol} from '../request/index'
const lists=ref([])

onMounted(()=>{
getAccesscontrol().then(res=>{
  console.log('门禁',res.data.data.result[0].tableData);
    lists.value=res.data.data.result[0].tableData
})

})

</script>

<style scoped lang="scss">
.box{
  display: flex;
  position: relative;
  background-image: url('../assets//images/pageBg.png');
}


.left{
  width: 32%;
  height: 100vh;
  background: url('../assets//images/Left.png') no-repeat 0 0 / 100% 100vh;
}


/* 左上 */
.left-top{
  margin: 60px 60px 0px 50px;

  height: 35vh;
}
/* 左中 */
.left-center{
   margin: 0 60px 0px 50px;
  
  height: 27vh;
}

.men{
  width: 98%;
  height: 85%;
  margin-top: 5px;
  background:#282363;
  display: flex;
  justify-content: space-between;
}

.openrt{
  width: 60%;
  height: 85%;

}
.opbom{
  height: 15vh;
  display: flex;
  justify-content: space-around;
  font-size: 18px;
  color: #fff;
  align-items: center;
}
.opbom div{
display: flex;
flex-direction: column;
align-items: center;
}
.optop{
  height: 8vh;
  align-items: center;
  
  font-size: 18px;
  color: #fff;
  display: flex;
  justify-content: space-around;
}

/* 左下*/
.left-bottom{
  margin: 0 60px 5px 50px;
  
  height: 30vh;
}


/* 中间 */
.center{
  width: 36%;
  height: 100vh;
  position: relative;
  .footernav{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
  }
}
.cenimg{
  position: absolute;
    left: 50%;top: 50%;
    margin-left: -45%;
    margin-top: -25%;
} 
.cenimg img{
  width: 90%;
  height: 50%;
}



.right{
  width: 32%;
  height: 100vh;
  background: url('../assets/images/Right.png') no-repeat 0 0 / 100% 100vh;
  box-sizing: border-box;
  padding: 80px 50px 0;
  color: #fff;
  font-size: 10px;
}



/* 右上 */
.right-top{
  margin: 0 15px 10px 10px;
  
  height: 90vh;

/* 右内上 */
.rt-top{
   margin: 0 15px 10px 10px;
  width: 100%;
  height: 27vh;
  img{
    margin-top: 9px;
    margin-left: 0px;
    width: 100%;
    height: 95%;
  }
}

/* 右内中 */
.rt-center{
   margin: 0 15px 10px 10px;

  height: 28vh;
    img{
    margin-top: 9px;
    margin-left: 0px;
    width: 100%;
    height: 95%;
  }
}


/* 右内下 */

.rt-bom{
   margin: 0 15px 10px 10px;
 
  height: 28vh;

    img{
    margin-top: 9px;
    margin-left: 0px;
    width: 100%;
    height: 95%;
  }
}

}










/* 顶部 */
.top{
 position: absolute;
 top: 0;
 left: 0;
 width: 100vw;
 height: 80px;
 background: url('../assets/images/Top.png') no-repeat 0 0 / 100% 100%;
 z-index: 1;
}

 .heads{
        width: 92%;
        height: 30px;
        background: url('../assets/images/titlebg.png') no-repeat 0 0 / 100% 100%;
        margin: 1px 18px;
        color: #e2e4bc;
        line-height: 30px;
        font-size: 14px;
         transform: rotateY(180deg);
    }
     .rotateTitle {
                transform: rotateY(-180deg);
                padding-left: 20px;
            }   
</style>